<!--  -->
<template>
  <div class="site-copy">
    <div class="note">
      <i class="el-icon-info"></i>
        <div class="nt_p">
          <p>注：复制后，原有网站版本内容将完全被覆盖，数据不可恢复</p>
        </div>
    </div>
      <el-form :model="site" v-loading="loading" ref="siteCopyForm"
        label-width="100px">
        <el-form-item label="当前语点：">
          {{ currentSite && currentSite.language && currentSite.language.name
        }}
        </el-form-item>
        <el-form-item label="复制到：" prop="toSiteId" :rules="rules.toSiteId">
          <el-select size="medium" v-model="site.toSiteId" style="width: 200px;" placeholder="请选择语言版本">
            <el-option v-for="item in languageFilter" :key="item.id" :label="showLanguageByLanguageId(item.languageId)" :value="item.id"></el-option>
          </el-select>
          <el-button type="primary" @click="save" size="medium">开始复制</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    close: {
      type: Function,
      default: () => { }
    }
  },
  created () {
  },
  data () {
    return {
      loading: false,
      site: {},
      rules: {
        toSiteId: [
          { required: true, message: '请选择语言版本', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentSite',
      'alllanguage'
    ]),
    languageFilter () {
      let languages = this.currentSite.list.filter(item => {
        return parseInt(item.languageId) !== parseInt(this.currentSite.site.languageId)
      })
      return languages
    }
  },
  methods: {
    showLanguageByLanguageId (id) {
      let item = this.alllanguage.find(ele => {
        return parseInt(ele.id) === parseInt(id)
      })
      if (!item) {
        return '未知：' + id
      }
      return item.name
    },
    showLanguageBytoSiteId (id) {
      let toSite = this.currentSite.list.filter(item => {
        return parseInt(item.id) === parseInt(id)
      })
      let item = this.alllanguage.find(ele => {
        return parseInt(ele.id) === parseInt(toSite[0].languageId)
      })
      if (!item) {
        return '未知：' + id
      }
      return item.name
    },
    save () {
      if (this.loading) {
        return
      }
      this.$refs['siteCopyForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$confirm(`<div style="font-size:18px; color:#333; margin-bottom:10px;">您正在将 ”${this.currentSite.language.name}版“ 数据覆盖至 ”${this.showLanguageBytoSiteId(this.site.toSiteId)}版“，是否确认？</div><div style="color:#cc0000; font-size:16px;">注意：覆盖后 “${this.showLanguageBytoSiteId(this.site.toSiteId)}版“ 元数据将丢失，无法还原！！！</div>`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true,
            customClass: 'copySiteConfirm',
            center: true
          }).then(() => {
            this.$post('/site/copy', {toSiteId: this.site.toSiteId}).then(response => {
              if (response) {
              } else {
              }
              this.loading = false
              this.close()
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>
<style scoped lang="scss">
.note {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #CC0000;
  i {
    position: absolute;
    color:#CC0000;
    left: 0;
    top: 3px;
  }
}
.site-copy {
  padding-top: 20px;
  padding-bottom: 50px;
  /deep/ .el-form-item{
    margin-bottom: 0;
  }
}
</style>
<style>
.copySiteConfirm {
  width: 520px !important;
}
</style>
